<!--头部公共部分-->
{include file="common/header" /}

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane">
                <div class="layui-row layui-form-item">
                    <label class="layui-form-label">同事检索</label>
                    <div class="layui-input-inline">
                        <input type="text" width="10%" style="width: 513px;" id="keywords" oninput="keyWords()"  data-type="search"  placeholder="姓名/手机号码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <fieldset class="layui-elem-field layui-field-title">
                </fieldset>
                <div id="matter_list" style="display: none">
                    <div>
                        <table class="layui-hide" id="table-organization" lay-filter="table-organization"></table>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title">
                    </fieldset>
                </div>
                <div id="matter_info" style="display: none">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>已选同事</legend>
                    </fieldset>
                    <div class="layui-row layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">同事姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" id="name"  readonly
                                       autocomplete="off" class="layui-input">
                                <input type="hidden" name="matter_id" id="matter_id" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mobile" id="mobile"  readonly
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title">
                    </fieldset>
                    <div class="layui-row layui-form-item">
                        <div class="layui-col-md6">
                            <div class="layui-input-block">
                                <a class="layui-btn layui-btn-normal" data-type="cancel">取消</a>
                                <input type="hidden" name="ids" value="{$ids}">
                                <input type="hidden" name="campus_id" value="{$campus_id}">
                                <input type="hidden" name="user_id" id="user_id">
                                <button class="layui-btn" lay-submit="" lay-filter="form-organization-add">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
    let x = 0;
    function keyWords() {
        x = document.getElementById("keywords").value;
        console.log(x);
    }
    layui.use(['table','element','form', 'layer'], function () {
        let table = layui.table,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        let loading = layer.load();

        //方法级渲染
        let tableIns = table.render({
            elem: '#table-organization'
            , url: '{:url("Student/query")}'
            , method: 'POST'
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                {field: 'name', title: '姓名', align: 'center', templet: '#name'},
                {field: 'mobile', title: '手机号码',align: 'center'},
                {field: 'campus_name', title: '校区',align: 'center'}
            ]]
            , done: function () {
                layer.close(loading);
            }
        });

        //监听行单击事件（单击事件为：rowDouble）
        table.on('row(table-organization)', function(obj){
            let data = obj.data;
            $('#name').val(data.name);
            $('#user_id').val(data.id);
            $('#mobile').val(data.mobile);

            let ids = $('input[name=ids]').val();
            $.post('{:url("Customer/get_Type_Or_Campus")}'
                ,{
                    'user_id':data.id,
                }
                ,function(result){
                    if(result.code === 1){
                        let user_type = result.data;
                        if(user_type != 4 && user_type != 5){
                            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.layer.open({
                                type: 2,
                                skin: 'layui-layer-lan',
                                closeBtn: 2,
                                title: '选择校区',
                                area: ['50%', '60%'],
                                shadeClose: false,
                                content: "{:url('Customer/campus')}?user_id="+data.id + '&ids='+ ids + '&user_status=' + 3,
                            });

                        }else{
                            $('#campus_id').val(data.campus_id);
                            $('#matter_list').hide();
                            $('#matter_info').show();
                            return false;
                        }
                    }
                });
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

        form.on('submit(form-organization-add)', function (data) {
            $.ajax({
                url: "{:url('Student/assignment')}",
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (res) {
                    if (res.code === 1) {
                        layer.msg(res.msg, {icon: 1, time: res.wait * 1000}, function () {
                            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2, time: res.wait * 1000}, function () {
                        });
                    }
                },
            });
            return false;
        });

        let active = {
            search:function () {
                $('#matter_list').show();
                $('#matter_info').hide();
                /*当输入域失去焦点 (blur) 时执行搜索*/
                $("input").blur(function(){
                    console.log(x);
                    let searchLoading = layer.load();
                    table.reload('table-organization', {
                        url: "{:url('Student/query')}"
                        , where: {word:x}
                        , done: function () {
                            layer.close(searchLoading);
                        }
                    });
                });
            },
            cancel: function () {
                let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            },
            reload: function () {
                window.location.reload();
            }
        };

        $('#keywords').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('.layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
